<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first three.js app</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
  /*  画布样式*/
    canvas{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<script src="js/three.js"></script>
<!--引入鼠标操作控件-->
<script src="js/OrbitControls.js"></script>
<script>
  /*
  * 创建场景对象Scene
  * */
  var scene = new THREE.Scene();
  //创建网格模型
  //var geometry = new THREE.SphereGeometry(60, 40, 40);//创建一个球体几何对象
  // var geometry = new THREE.BoxGeometry(100, 100, 100);
  // var material = new THREE.MeshLambertMaterial({
  //   color:0x00ff00
  // });//材质对象material
  // var mesh = new THREE.Mesh(geometry, material)//网格模型对象Mesh
  // scene.add(mesh)//网格模型添加到场景中
  var plant = new THREE.Object3D();
  var geometry = new THREE.CylinderGeometry( 6, 6, 23, 48);
  var material = new THREE.MeshLambertMaterial( {color: 0xffffff});
  var cylinder = new THREE.Mesh( geometry, material);
  cylinder.position.x = 0;
  cylinder.position.y = 0.2;
  cylinder.position.z = 0;
  scene.add(cylinder);
  var leafTexture = new THREE.ImageUtils.loadTexture('img/leaf.png');
  leafTexture.wrapS = leafTexture.wrapT = THREE.RepeatWrapping;
  leafTexture.repeat.set(1,1);
  var leafMaterial = new THREE.MeshLambertMaterial( {map: leafTexture, side: THREE.DoubleSide});
  var gemo = new THREE.PlaneGeometry(40, 80);
  for(var i=0; i < 4; i++){
  				  var leaf = new THREE.Mesh( gemo, leafMaterial);
  				  leaf.position.y = 80;
  				  leaf.rotation.y = -Math.PI/(i+1);
  				  plant.add(leaf);
  }
  plant.position.x = 1;
  plant.position.y = 1.2;
  plant.position.z = 1;
  scene.add(plant);
  /*
  * 光源设置
  * */
  //点光源
  var point = new THREE.PointLight(0xffffff);
  point.position.set(400, 200, 300);//点光源的位置
  scene.add(point);//点光源添加到场景中
  //环境光
  var ambient = new THREE.AmbientLight(0x444444);
  scene.add(ambient);
  /*
  * 相机设置
  * */
  var width = window.innerWidth;//窗口宽度
  var height = window.innerHeight;//窗口高度
  var k = width / height;//窗口宽高比
  var s = 200;//三维场景显示范围控制系数，系数越大，显示的范围越大
  //创建相机对象
  var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);//正射投影相机对象
  camera.position.set(200, 300, 200);//设置相机方向设置相机位置
  camera.lookAt(scene.position);//（制定的场景对象）
  /*
  * 创建渲染器对象
  * */
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xb9d3ff, 1);//设置背景颜色
  document.body.appendChild(renderer.domElement);//body元素中插入canvas对象
  function render () {
    renderer.render(scene,camera);
    cylinder.rotateY(0.01)
    requestAnimationFrame(render);
  }
  render();
  var controls = new THREE.OrbitControls(camera);

</script>

</body>
</html>
